<template>
  <view
    class="task-custom"
    :style="style"
    :class="[
      bgImage != '' ? 'none-bg text-white bg-img' : '',
      bgColor,
      radius ? 'bottom-radius' : '',
    ]"
  >
    <view class="task-bar cu-bar">
      <view class="action" @tap="BackPage" v-if="isBack">
        <text class="cuIcon-back"></text>
        <slot name="backText"></slot>
      </view>
      <view class="content">
        <slot name="content"></slot>
      </view>
      <slot name="btn"></slot>
    </view>
    <slot name="cumul"></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: 40,
    };
  },
  name: 'cu-custom',
  computed: {
    style() {
      var StatusBar = this.StatusBar;
      var bgImage = this.bgImage;
      var style = `padding-top:${StatusBar}px;`;
      if (this.bgImage) {
        style = `${style}background-image:url(${bgImage});`;
      }
      return style;
    },
  },
  props: {
    bgColor: {
      type: String,
      default: '',
    },
    isBack: {
      type: [Boolean, String],
      default: false,
    },
    bgImage: {
      type: String,
      default: '',
    },
    radius: {
      type: Boolean,
      default: false,
    },
    url: {
      type: String,
      default: '',
    },
  },
  methods: {
    BackPage() {
      console.log(this.url);
      if (this.url) {
        uni.navigateTo({
          url: this.url,
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
  },
};
</script>

<style scoped>
.task-custom {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  overflow: hidden;
}

.task-custom.bottom-radius {
  border-bottom-right-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
}

.task-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
}

.task-bar .content {
  position: absolute;
  inset: 0;
  width: calc(100% - 340rpx);
  margin: auto;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  cursor: none;
}

.cuIcon-back {
  margin-right: 15rpx;
}
</style>
